<template>
  <div class="ucenter">
    <div class="uc-grid">
      <div class="menu-flex">
        <!-- <div class="menu-link">
          <i class="iconfont van-icon-qiandao"></i>
        </div> -->
        <!-- @click="href('/scan')" -->
        <div @click="scan" class="menu-link">
          <van-icon name="scan" />
        </div>
        <div class="menu-link" @click="href('/ListItem')">
          <van-icon name="chat-o" />
        </div>
      </div>
      <!-- <div class="ex-lnk">
        <i class="iconfont van-icon-kaoshizhongxin"></i>
        <span>考前秘卷</span>
      </div> -->

      <van-cell v-if="islogin" center class="uc-van-cell" :title="userName">
        <template #icon>
          <div class="uc-avatar">
            <img :src="baseURL + img" alt />
          </div>
        </template>
      </van-cell>
      <!-- <van-uploader :after-read="afterRead" /> -->

      <van-cell
        v-else
        @click="AuthCode()"
        center
        class="uc-van-cell"
        title="立即登录"
      >
        <template #icon>
          <div class="uc-avatar">
            <img src="../../assets/avatrar2.jpg" alt />
          </div>
        </template>
      </van-cell>
    </div>
    <div class="uc-main">
      <div class="uc-heading justify">
        <van-tabs type="card" @click="onClick" color="#0e6edb">
          <van-tab title="科一"></van-tab>
          <van-tab title="科四"></van-tab>
        </van-tabs>
        <div class="ex-link">切换题库：小车 ></div>
      </div>
      <div class="uc-body">
        <van-row class="uc-rows">
          <van-col :span="8">
            <div class="uc-val">{{ appUp }}</div>
            <div class="uc-txt">已做题</div>
            <div class="uc-nn">共{{ complete }}题</div>
          </van-col>
          <van-col :span="8">
            <div class="uc-val">{{ score }}</div>
            <div class="uc-txt">考试平均分</div>
            <div class="uc-nn">完成考试{{ frequency }}次</div>
          </van-col>
          <van-col :span="8">
            <div class="uc-val">{{ mistakes }}</div>
            <div class="uc-txt">错题本</div>
            <div class="uc-nn">共答{{ enshrine }}题</div>
          </van-col>
        </van-row>
        <div class="uc-menus">
          <div class="uc-center">个人中心</div>
          <ul class="uc-menu-links">
            <li v-for="(item, i) in menus" :key="i">
              <router-link v-if="item.url" :to="item.url" class="uc-menu-box">
                <img :src="item.pics" alt />
                <div class="m-label">{{ item.txt }}</div>
              </router-link>
              <div v-else class="uc-menu-box" @click="loading()">
                <img :src="item.pics" alt />
                <div class="m-label">{{ item.txt }}</div>
              </div>
            </li>
          </ul>
        </div>
        <!-- 培训信息 -->
        <div class="uc-menus">
          <div class="uc-center">培训信息</div>
          <ul class="uc-menu-links">
            <li v-for="(item, i) in menusli" :key="i">
              <router-link v-if="item.url" :to="item.url" class="uc-menu-box">
                <img :src="item.pics" alt />
                <div class="m-label">{{ item.txt }}</div>
              </router-link>
              <div v-else class="uc-menu-box" @click="loading()">
                <img :src="item.pics" alt />
                <div class="m-label">{{ item.txt }}</div>
              </div>
            </li>
          </ul>
        </div>
        <!-- end -->
        <!-- 其他 -->
        <!-- 培训信息 -->
        <div class="uc-menus">
          <div class="uc-center">其他</div>
          <ul class="uc-menu-links">
            <li v-for="(item, i) in rest" :key="i">
              <router-link v-if="item.url" :to="item.url" class="uc-menu-box">
                <img :src="item.pics" alt />
                <div class="m-label">{{ item.txt }}</div>
              </router-link>
              <div v-else class="uc-menu-box" @click="loading()">
                <img :src="item.pics" alt />
                <div class="m-label">{{ item.txt }}</div>
              </div>
            </li>
          </ul>
        </div>
        <!-- end -->
        <!-- end -->
      </div>
    </div>
    <!-- main -->
    <div class="wrappers">
      <!-- 菜单 -->

      <div class="uc-ad">
        <a href>
          <img src="../../assets/ucad.jpg" />
        </a>
      </div>
    </div>
    <!-- footer -->
    <van-tabbar :z-index="999" v-model="active" :placeholder="true">
      <van-tabbar-item icon="tongxunlu" to="/SignIndex">报名</van-tabbar-item>
      <van-tabbar-item icon="zixun" to="/News">资讯</van-tabbar-item>
      <van-tabbar-item icon="faxian" to="/">考试</van-tabbar-item>
      <van-tabbar-item icon="home" @click="link">商城</van-tabbar-item>
      <van-tabbar-item icon="wode" to="/Ucenter">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>
<script>
// import{router} from '../../router/index'
import { Toast } from "vant";
import { baseURL } from "../../assets/js/config";
import { DoubleCounting, AverageScore } from "../../assets/js/api/user";
export default {
  data() {
    return {
      active: 4,
      islogin: false,
      img: "", // 用户头像
      //用户昵称
      userName: "",
      enshrine: 0, // 错题收藏中已经做得题
      status: "", // 储存用户是否报名的状态
      appUp: 0, // 用来储存已经做的题
      complete: 0, // 统计总共是多少道题
      mistakes: 0, // 错题本统计
      score: 0, // 考试平均分
      frequency: 0, // 完成考试次数
      menus: [
        {
          url: "/BasicInfo",
          txt: "基本信息",
          pics: require("../../assets/uc1.png")
        },
        {
          url: "/UcOrders",
          txt: "账单明细",
          pics: require("../../assets/uc2.png")
        },
        {
          url: "/MyFavorite",
          txt: "我的收藏",
          pics: require("../../assets/uc3.png")
        },
        {
          txt: "我的帖子",
          pics: require("../../assets/uc4.png")
        },
        {
          // url: "/Loans",
          txt: "我的贷款",
          pics: require("../../assets/uc5.png")
        },
        {
          txt: "VIP课程",
          pics: require("../../assets/uc6.png")
        },
        // {
        //   url: "/MyAccount",
        //   txt: "我的账户",
        //   pics: require("../../assets/uc13.png")
        // },
        {
          url: "/MistakesCollect",
          txt: "错题本",
          pics: require("../../assets/uc4.png")
        }
      ],
      menusli: [
        {
          url: "/MyPact",
          txt: "我的合同",
          pics: require("../../assets/uc1.png")
        },
        {
          url: "/TaxiHailing",
          txt: "我要约车",
          pics: require("../../assets/uc2.png")
        },
        {
          txt: "我要约考",
          pics: require("../../assets/uc15.png")
        },
        {
          // url: "/MyExamination",
          txt: "我要补考",
          pics: require("../../assets/uc3.png")
        },
        {
          txt: "我的视频",
          pics: require("../../assets/uc8.png")
        },
        {
          url: "/TrainingRecord",
          txt: "约车/培训",
          pics: require("../../assets/uc5.png")
        }
      ],
      rest: [
        {
          url: "/ServiceCenter",
          txt: "服务中心",
          pics: require("../../assets/uc12.png")
        },
        {
          url: "/Set",
          txt: "设置",
          pics: require("../../assets/uc14.png")
        }
      ]
    };
  },

  beforeRouteLeave(to, from, next) {
    let _this = this;
    // console.log(to);
    if (
      (to.path === "/MyPact" ||
        to.path === "/TrainingRecord" ||
        to.path === "/TaxiHailing") &&
      _this.status == 501
    ) {
      Toast.fail("请先报名");
    } else if (
      (to.path === "/MyPact" ||
        to.path === "/TrainingRecord" ||
        to.path === "/TaxiHailing") &&
      _this.status == 502
    ) {
      Toast.fail("您尚未缴费，请缴费通过并面签");
    } else if (
      (to.path === "/MyPact" ||
        to.path === "/TrainingRecord" ||
        to.path === "/TaxiHailing") &&
      _this.status == 503
    ) {
      Toast.fail("您尚未面签通过，请先到报名驾校面签");
    } else {
      next();
    }
  },

  created() {
    this.baseURL = baseURL;
    if (sessionStorage.getItem("token") || localStorage.getItem("token")) {
      AverageScore().then(res => {
        // console.log(res);
        this.frequency = res.data.NUM;
        if (res.data.AVGNUM == null) {
          this.score = 0;
        } else {
          this.score = res.data.AVGNUM;
        }
      });
    }
    if (localStorage.getItem("enshrine")) {
      this.enshrine = localStorage.getItem("enshrine");
    }

    if (localStorage.getItem("complete")) {
      this.complete = localStorage.getItem("complete");
    }
    if (localStorage.getItem("mistakes")) {
      this.mistakes = localStorage.getItem("mistakes");
    }
    if (localStorage.getItem("grandTotal")) {
      let grandTotal = parseInt(localStorage.getItem("grandTotal"));
      this.appUp = grandTotal;
    } else {
      this.appUp = 0;
    }

    // console.log(this.appUp);

    if (sessionStorage.getItem("token") || localStorage.getItem("token")) {
      // console.log("我的页面");
      DoubleCounting().then(res => {
        this.status = res.code;
        // console.log(res);
      });

      this.islogin = true;
    } else if (
      sessionStorage.getItem("token") ||
      localStorage.getItem("token")
    ) {
      this.islogin = true;
    } else {
      this.islogin = false;
    }

    this.img = localStorage.getItem("img");
    // console.log("用户头像" + this.img);
    this.userName = localStorage.getItem("userName");
    // console.log("用户昵称" + this.userName);
  },
  methods: {
    // 扫一扫
    scan() {
      let dsBridge = require("dsbridge");
      dsBridge.call("scan", "", function(data) {
        Toast(data);
      });
    },

    onClick(name, title) {
      if (title == "科一") {
        if (sessionStorage.getItem("token") || localStorage.getItem("token")) {
          AverageScore().then(res => {
            // console.log(res);
            this.frequency = res.data.NUM;
            if (res.data.AVGNUM == null) {
              this.score = 0;
            } else {
              this.score = res.data.AVGNUM;
            }
          });
        }

        if (localStorage.getItem("complete")) {
          this.complete = localStorage.getItem("complete");
        }
        if (localStorage.getItem("mistakes")) {
          this.mistakes = localStorage.getItem("mistakes");
        }
        if (localStorage.getItem("grandTotal")) {
          let grandTotal = parseInt(localStorage.getItem("grandTotal"));
          this.appUp = grandTotal;
        } else {
          this.appUp = 0;
        }
      }
      if (title == "科四") {
        console.log("科四");
        if (sessionStorage.getItem("token") || localStorage.getItem("token")) {
          AverageScore().then(res => {
            // console.log(res);
            this.frequency = res.data.NUM;
            if (res.data.AVGNUM == null) {
              this.score = 0;
            } else {
              this.score = res.data.AVGNUM;
            }
          });
        }

        if (localStorage.getItem("complete4")) {
          this.complete = localStorage.getItem("complete4");
        }
        if (localStorage.getItem("mistakes4")) {
          this.mistakes = localStorage.getItem("mistakes4");
        }
        if (localStorage.getItem("grandTotal4")) {
          let grandTotal = parseInt(localStorage.getItem("grandTotal4"));
          this.appUp = grandTotal;
        } else {
          this.appUp = 0;
        }
      }
    },

    link() {
      window.open(
        "https://www.guazi.com/sjz/?ca_n=pcbiaoti&ca_s=pz_baidu&tk_p_mti=ad.pz_baidu.pcbiaoti.1.112642602791964672",
        "_blank"
      );
    },

    loading() {
      this.$toast.fail("功能开发中");
    },
    href(url) {
      console.log(url);
      this.$router.push({ path: url });
    },
    AuthCode() {
      this.$router.push({ path: "/AuthCode" });
    }
  }
};
</script>
<style></style>
